<template>
	<view>
		<view class="comments-box bg-white">
			<view class="title fbox fbox-acenter" v-if="ishide == true">
				<image src="/static/information/line.png" mode="widthFix"></image>
				<text class="color3 f36">Comments({{commentList.length}})</text>
			</view>
			<view class="input-box fbox fbox-acenter fbox-jbetween">
				<image :src="myList.avatar" mode="widthFix"></image>
				<input type="text" disabled placeholder="comment" @click="showtag()" />
			</view>
			<view class="comments-cont" v-for="(item,index) in commentList">
				<view class="comments-cont-item fbox">
					<view class="left">
						<image :src="item.avatar" mode="widthFix"></image>
					</view>
					<view class="right">
						<view class="mingzi f32 color3">
							{{item.nickname || 'Anonymous' }}
						</view>
						<view class="miaoshu f26">
							{{item.comment}}
						</view>
						<view class="shijianzan f24 fbox fbox-acenter fbox-jbetween">
							<view class="shijian">
								{{item.time || item.date}}
							</view>
							<view class="rate" v-if="type == 'business'||type == 'telBook'">
								<u-rate :readonly="true" count="5" v-model="item.stars"></u-rate>
							</view>
							<view class="zan fbox fbox-acenter" v-else>
								<u-icon name="thumb-up" v-if="item.isLike == 0" @click="gocommentsthumb(item.id)"
									color="#999" size="28"></u-icon>
								<u-icon name="thumb-up-fill" v-if="item.isLike == 1" @click="gocommentsthumb(item.id)"
									color="red" size="28"></u-icon>
								<text>{{item.aic_like_num}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mask" v-if="isshow == true">
			<view class="mask-content">
				<view class="mask-content-topbar">
					<view class="left" @click="toggleMask">{{$t('comment.cancel')}}</view>
					<view class="right" @click="pubComment">{{$t('comment.release')}}</view>
				</view>
				<view class="mask-content-input">
					<textarea class="textarea" v-model="content" :placeholder="placeholder" :cursor-spacing="100"
						:show-confirm-bar="false" :focus="focus" maxlength="500"></textarea>
					<view class="rate" v-if="type == 'business'||type =='telBook'">
						<u-rate :count="count" v-model="value"></u-rate>
					</view>
				</view>

				<view class="protocol">
					<view class="">
						<u-checkbox-group @change="checkboxChange">
							<u-checkbox v-model="checked" shape="square"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view>
						{{ $t('comment.deal') }}
						<text style="color: #ff7c00"
							v-on:click.stop="goTerms('applet_agreement_addcomment')">{{ $t('comment.clause') }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ygcComment from '@/components/ygc-comment.vue';
	export default {
		name: "comments",
		components: {
			ygcComment
		},
		data() {
			return {
				commentContent: '',
				myList: {},
				placeholder: this.$t('comment.Please'),
				maskState: 0,
				content: '',
				focus: false,
				checked: false,
				count: 5,
				value: 0,
				isshow: false
			};
		},
		props: {
			commentList: {
				type: Array,
				default () {
					return []
				}
			},
			ishide: {
				type: Boolean,
				default: true
			},
			id: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: ''
			}
		},
		created() {
			this.userinfo()
		},
		methods: {
			showtag(){
				this.isshow = true
			},
			ratechange(e){
				console.log(e)
			},
			goTerms(map) {
				uni.navigateTo({
					url: '/pages/Agreement/Agreement?map=' + map
				})
			},
			checkboxChange(n) {
				this.checked = !this.checked
			},
			toggleMask() {
				this.isshow = false
			},
			pubComment() {
				if (this.checked == false) {
					uni.showToast({
						title: this.$t('comment.massage'),
						icon: 'none'
					})
					return
				}
				if (this.content == '') {
					uni.showToast({
						title: this.$t('comment.mass1'),
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					content: this.content
				}
				if (this.type == 'goods') {
					params.sid = this.id
					params.map = 'applet_city_shop_comment'
				}
				if (this.type == 'info') {
					params.aid = this.id
					params.map = 'applet_information_comment'
				}
				if (this.type == 'news') {
					params.map = 'applet_information_comment'
					params.aid = this.id
				
				}
				if (this.type == "business") {
					params.map = 'applet_city_shop_comment'
					params.sid = this.id
					params.stars = this.value
				}
				if (this.type == "telBook") {
					params.map = 'applet_city_shop_comment'
					params.sid = this.id
					params.stars = this.value
					params.type = 1
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						uni.showToast({
							title: res.data.data.msg,
							icon: 'none'
						})
						this.isshow = false
						this.$emit('init');
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.data.data.msg,
							icon: 'none'
						})
					}
				})
			},
			userinfo() {
				const params = {
					map: 'applet_member_center_cfg'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.myList = res.data.data
						console.log(this.myList, '信息')
					} else {}
				})

			},
			gocommentsthumb(id) {
				uni.showLoading({
					mask: true
				})
				const params = {
					map: 'applet_comment_like',
					aic_id: id
				}
				console.log(params)
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						uni.showToast({
							title: res.data.data.msg,
							icon: "none"
						})
						this.$emit("getcomment")
					} else {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0rpx;
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9995;
		transition: .3s;
		-webkit-transition: .3s;
	
		.rate {
			margin-left: 20rpx;
			padding: 20rpx 0;
			z-index: 9999999999999999999;
			position: absolute;
			bottom: 20rpx;
			right: 30rpx;
		}
	
		.mask-content {
			width: 100%;
			background: #FFFFFF;
			// overflow-y:scroll;
			display: flex;
			flex-direction: column;
	
			.mask-content-topbar {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 20upx 30upx 10upx;
				font-size: 32upx;
	
				.left {
					padding: 10upx 0upx;
					color: #000;
				}
	
				.right {
					padding: 10upx 100upx;
					border-radius: 6upx;
					color: #FFFFFF;
					font-weight: 500;
					background-color: #00aaff;
				}
			}
	
			.mask-content-input {
				width: 718upx; //如果textarea的宽带有问题可以把width改为100%试试
				// width: 100%;
				padding: 10upx 16upx 20upx;
				position: relative;
				.textarea {
					height: 100px;
					width: 686upx; //如果textarea的宽带有问题可以把width改为100%试试
					// width: 100%;
					padding: 16upx;
					border: 2upx solid #d5d5d6;
					border-radius: 8upx;
				}
			}
		}
	
		&.none {
			display: none;
		}
	
		&.show {
			background: rgba(0, 0, 0, .4);
	
			.mask-content {
				transform: translateY(0);
			}
		}
	}
	
	.protocol {
		width: 89.3%;
		display: flex;
		color: #000;
		margin: 0 auto;
		font-size: 24rpx;
		margin-top: 20rpx;
		padding-bottom: 88rpx;
	}
	.content {
		height: 100%;
		width: 100%;
	}

	.comments-box {
		padding: 0 30rpx;

		.title {
			padding: 30rpx 0;
			font-weight: bold;

			image {
				width: 8rpx;
				margin-right: 20rpx;
			}

			text {}
		}

		.input-box {
			image {
				width: 80rpx;
				height: 70rpx;
				margin-right: 20rpx;
				border-radius: 100%;
				background-color: #eeeeee;
			}

			input {
				width: 90%;
				background-color: #f4f5f6;
				padding: 10rpx 30rpx;
				border-radius: 30rpx;
			}
		}

		.comments-cont {
			.comments-cont-item {
				border-bottom: 1px solid #f4f5f6;
				padding: 30rpx 0;
				margin-top: 10rpx;

				.left {
					width: 12%;

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 100rpx;
						background-color: #eeeeee;
					}
				}

				.right {
					width: 88%;

					.mingzi {}

					.miaoshu {
						color: #6f6f6f;
						margin-top: 10rpx;
					}

					.shijianzan {
						color: #6f6f6f;
						margin-top: 20rpx;
						position: relative;

						.rate {
							position: absolute;
							right: 0;
							top: -90rpx;
						}

						.shijian {}

						.zan {
							image {
								width: 30rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
